<!--
 * @Author: your name
 * @Date: 2021-02-05 14:52:13
 * @LastEditTime: 2021-03-29 11:32:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3-element-admin\src\views\layoutpages\system\Roles.vue
-->
<template>
    <div class="ve_container">
        <RoleHeader @add="handleAdd" :type="RoleHeaderType">
                    <div style=" margin-top: 10px;" @click="addDepartmemt">
                        <el-button type="danger" icon="ArrowLeft" size="mini"
                        >+ 新增</el-button>
                    </div>
        </RoleHeader>
        <div>
            <div class="tab">
                <el-row>
                    <el-col :span="5">
                        <div class="tab-k">id</div>
                    </el-col>
                    <el-col :span="5">
                        <div class="tab-k">名称</div>
                    </el-col>
                    <el-col :span="5">
                        <div class="tab-k">添加时间</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="tab-k">操作</div>
                    </el-col>
                </el-row>
            </div>
            <div class="tab-value">
                <div class="d" v-for="(item, index) in tableData" :key="index">
                    <el-row>
                        <el-col :span="5">
                            <div class="tab-v fnt">{{item.id}}</div>
                        </el-col>
                        <el-col :span="5">
                            <div class="tab-v">{{item.label}}</div>
                        </el-col>
                        <el-col :span="5">
                            <div class="tab-v">{{item.create_time}}</div>
                        </el-col>
                        <el-col :span="2">
                            <div class="tab-v d-fix">
                                <div class="butt-edit" style="margin-right:10px;" @click="handleEdit(item.id,item.label,2)">
                                    <el-button size="mini" type="primary"
                                        >编辑</el-button
                                    >
                                </div>
                                <div class="butt-edit" @click="handleDel(item.id)">
                                    <el-button size="mini" type="danger"
                                        >删除</el-button
                                    >
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>

                <div class="pagin">
                    <!-- 分页 -->
                    <el-pagination v-if="tableData.length && total>params.limit" layout="prev, pager, next"  
                        @current-change="handleCurrentChange"
                        :current-page="params.page"
                        :page-size="params.limit" 
                        :total="total">
                    </el-pagination>
                </div>
            </div>

          
            <el-dialog
      :title="state.titleText +'部门'"
      v-model="state.dialogVisible"
      custom-class="dialog"
      :append-to-body="true"
      @close="closeDialog"
    >
      <el-form
        :model="state.form"
        label-width="80px"
        hide-required-asterisk
        class="form"
      >
        <el-form-item label="名称:" required>
          <el-input v-model="state.form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="comfirmBtn">确 定</el-button>
        </span>
      </template>
    </el-dialog>
        </div>
    </div>
</template>

<script>
import { departList, deleteDepart,editDepart, addDepart} from "@/request/api"
import RoleHeader from "@/components/common/role-header";
import {
    reactive,
    toRefs,
    computed,
    ref,
    onMounted,
    getCurrentInstance
} from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { findName } from "../common";

//*导入公共查询方法
import {
    onSubmit,
    resetForm,
    handleSizeChange,
    rowClassName,
    cellClassName,
    rowClick,
    maxHeight
} from "@/views/layoutpages/common";

const state = reactive({
    form:{
        name:'',
        id:'',
    },
    dialogVisible: false,
    titleText:'',
})

export default {
    data: () => ({
        description: "角色信息查询与设置",
        menus: {
            search: { name: "查询" },
            add: { name: "添加" },
            edit: { name: "编辑" },
            del: { name: "删除" },
            member: { name: "查看成员", toPath: true }
        }
    }),
    components: {
        RoleHeader
    },
    setup() {
        const { proxy } = getCurrentInstance();
        const _this =  getCurrentInstance().appContext.config.globalProperties;
        const route = useRoute();
        const router = useRouter();
        const store = useStore();
        const menuList = computed(() => store.getters.menuList).value;
        const value1 = true;
        const rowData = ref(null);
        const dialogTitle = ref("");
        const showDialog = ref(false);
        const ve_max_height = ref(0);
        const ve_rowIndex = ref(null);
        const toolBar = ref(null);
        const pagination = ref(null);
        const queryForm = ref(null);
        const tableData = ref([]);
        const RoleHeaderType = ref(2);
        const params = reactive({
            page: 1,
            limit: 10
        });
        const { name, limit, page, total } = toRefs(params);

        /**
         * @description:添加or编辑事件
         * type 2编辑 1新增
         * @param {*}
         * @return {*}
         */
        const handleEdit = (_id,_name,_type) => {
            state.dialogVisible = true ;
            state.form.name = _name
            state.form.id = _id
            if(_type==2){
                state.titleText = '编辑'
            }else if(_type==1){
                state.titleText = '新增'
            }
            // showDialog.value = true;
            // dialogTitle.value = title;
            // rowData.value = row;

        };
        function handleAdd(_item){
            console.log(_item);
        }
        /**
         * @description: dialog事件
         * @param {*}
         * @return {*}
         */
        const handelDialog = e => {
            showDialog.value = e;
            getDataList();
        };
        /**删除行数据
         * @description:
         * @param {*}
         * @return {*}
         */
        const handleDel = id => {
            proxy
                .$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "error"
                })
                .then(async () => {
                    const { ret } = await deleteDepart({ id });
                    if (ret == 200) {
                        getDataList();
                    }
                })
                .catch(() => {
                    proxy.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        };
        /**
         * @description:查看成员
         * @param {*}
         * @return {*}
         */
        const allMember = id => {
            // 获取当前path的id
            let pathId = route.name.slice(route.name.lastIndexOf("-") + 1);
            // 获取要跳转到的路由
            const toName = findName(
                "member",
                "system/Users",
                pathId,
                menuList,
                proxy
            );
            router.push({ name: toName, query: { id } });
        };
        /**
         * @description: 获取列表数据
         * @param {*}
         * @return {*}
         */
        const getDataList = async () => {
            const { ret, data } = await departList(params);
            let fData = data
            if (ret == 200) {
                const { current_page, total, data } = fData;
                params.page = current_page;
                params.total = total;
                tableData.value = data;
            }
        };
        const handleCurrentChange = (val) => {
                console.log(val);
                if (val !== params.page) {
                    params.page = val
                    return getDataList()
                }
        }

        function comfirmBtn(){
            if (!state.form.name) {
                return
            }
            if ( state.titleText=='新增') {
                let data = {
                    name : state.form.name
                }
                addDepart(data).then(res=>{
                     if (res.ret == 200) {
                        _this.$message.success({
                            message: "添加成功",
                            type: "success",
                        });
                        state.form.name = "";
                        state.dialogVisible = false;
                        getDataList();
                    }
                })
            }else if(state.titleText=='编辑'){
                editDepart(state.form).then(res=>{
                    if (res.ret == 200) {
                        _this.$message.success({
                            message: "编辑成功",
                            type: "success",
                        });
                        state.form.name = "";
                        state.form.id = "";
                        state.dialogVisible = false;
                        getDataList();
                    }
                })
            }
        }
        function addDepartmemt(){
            state.titleText = '新增'
            state.dialogVisible = true
            state.form.name = ''
            state.form.id = ''
        }

        //关闭dialog
        const closeDialog = () => {
            state.dialogVisible = false;
            state.form.name = ''
        };

        onMounted(async () => {
            await getDataList();
            maxHeight(pagination, queryForm, toolBar, ve_max_height);
        });
        return {
            ve_max_height,
            ve_rowIndex,
            getDataList,
            tableData,
            params,
            ...{ name, limit, page, total },
            ...{ pagination, queryForm, toolBar },
            ...{ handleEdit, rowData, dialogTitle, showDialog },
            ...{
                onSubmit,
                resetForm,
                handleSizeChange,
                rowClassName,
                cellClassName,
                rowClick,
                maxHeight
            },
            handelDialog,
            handleDel,
            allMember,
            value1,
            handleCurrentChange,
            RoleHeaderType,
            handleAdd,
            closeDialog,
            comfirmBtn,
            state,addDepartmemt,
        };
    }
};
</script>

<style lang="scss" scoped>
.el-main {
    background: #eff3fb !important;
}
.bg {
    background: white;
    padding: 55px 30px 35px 35px;
    border-radius: 10px;
}
.tab {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 20px;
}
.tab-value {
    background: white;
    padding-left: 20px;
    padding-top: 5px;
    border-radius: 8px;
    min-height: 400px;
    position: relative;
    padding-bottom: 80px;
}
.tab-k {
    color: #7a8499;
    font-size: 13px;
    font-weight: 600;
}
.tab-v {
    color: #7a8499;
    font-size: 13px;
    line-height: 30px;
}
.fnt {
    color: #45484d;
    font-weight: bold;
}
.d {
    padding-top: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f9f9f9;
}
.d-fix {
    display: flex;
    justify-content: space-between;
}
.pagin {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}
</style>
